<script setup>
  import { RouterLink, RouterView } from 'vue-router';
  import { reactive, computed, watch, ref, onMounted } from 'vue';
  import { Solar, Lunar, HolidayUtil, SolarUtil } from 'lunar-javascript';
  import utilTool from '@/js/utilTool';
  const toolDate = ref([]);
  const showInfo = ref({});
  let lastSelect = {};

  // 本年
  let yearR = new Date().getFullYear();
  // 本月
  let monthR = new Date().getMonth();
  // // 获取本日
  // let nowDate = new Date().getDate();

  init(new Date().getFullYear(), new Date().getMonth());

  // 初始化信息 month(0-11)
  function init(year, month) {
    //获取本月第一天的当周的周一
    const dayOfWeek = new Date(year, month, 1).getDay();
    let firstWeekDay = new Date(year, month, 1 + (dayOfWeek === 0 ? -6 : 1 - dayOfWeek));

    toolDate.value = [];
    if (month == new Date().getMonth() && year == new Date().getFullYear()) {
      showInfo.value.workDayNum = 0;
      showInfo.value.restDayNum = 0;
      showInfo.value.alreadyDayNum = 0;
      showInfo.value.alreadyWorkDayNum = 0;
      showInfo.value.alreadyRestDayNum = 0;
      showInfo.value.nextRestDayNumSwitch = false;
      showInfo.value.nextRestDayNum = 0;
      //本月多少天
      showInfo.value.dayNum = SolarUtil.getDaysOfMonth(year, month + 1);
    }

    for (let i = 1; i <= 42; i++) {
      let obj = {};

      let yearT = firstWeekDay.getFullYear();
      let monthT = firstWeekDay.getMonth() + 1;
      let dateT = firstWeekDay.getDate();
      setDateInfo(obj, yearT, monthT, dateT);
      firstWeekDay.setDate(firstWeekDay.getDate() + 1);

      toolDate.value.push(obj);
    }
  }

  // 设置每一个日子的数据和部分展示数据
  function setDateInfo(obj, year, month, date) {
    let nowDate = new Date().getDate();
    obj.year = year;
    obj.month = month;
    obj.date = date;
    // 获取阳历
    let solar = Solar.fromYmd(year, month, date);
    // 星期数0-6
    let solarWeek = solar.getWeek();
    // 节日数组
    obj.solarFestivals = solar.getFestivals();
    // 纪念日数组
    // obj.solarOtherFestivals = solar.getOtherFestivals();
    // 获取阴历
    let lunar = solar.getLunar();
    obj.lunarDay = lunar.getDayInChinese();
    // 阴历节日数组
    obj.lunarFestivals = lunar.getFestivals();
    // 阴历其他传统节日
    // obj.lunarOtherFestivals = lunar.getOtherFestivals();

    // 展示信息
    obj.showInfo = obj.lunarDay;
    if (utilTool.isNotEmpty(lunar.getJieQi())) {
      obj.showInfo = lunar.getJieQi();
    }
    if (obj.lunarFestivals.length > 0) {
      obj.showInfo = obj.lunarFestivals[0];
    }
    if (obj.solarFestivals.length > 0) {
      obj.showInfo = obj.solarFestivals[0];
    }

    // 是否是休息日-周末
    if (solarWeek == 0 || solarWeek == 6) {
      obj.isRest = true;
    } else {
      obj.isRest = false;
    }

    obj.adjust = '';
    // 是否是休息日-假期
    var holiday = HolidayUtil.getHoliday(year, month, date);
    if (utilTool.isNotEmpty(holiday)) {
      if (holiday.isWork()) {
        obj.isRest = false;
        obj.adjust = 'work';
      } else {
        obj.isRest = true;
        obj.adjust = 'rest';
      }
    }

    // 是否是本月日期
    if (month == monthR + 1) {
      if (month == new Date().getMonth() + 1 && year == new Date().getFullYear()) {
        if (obj.isRest) {
          showInfo.value.restDayNum += 1;
          if (date < nowDate) {
            showInfo.value.alreadyRestDayNum += 1;
          }
        } else {
          showInfo.value.workDayNum += 1;
          if (date < nowDate) {
            showInfo.value.alreadyWorkDayNum += 1;
          }
        }
        if (date < nowDate) {
          showInfo.value.alreadyDayNum += 1;
        }
      }

      obj.isOpacity = false;
    } else {
      obj.isOpacity = true;
    }

    //计算下一休息日
    if (month == new Date().getMonth() + 1 && year == new Date().getFullYear()) {
      if (showInfo.value.nextRestDayNumSwitch) {
        if (obj.isRest) {
          showInfo.value.nextRestDayNumSwitch = false;
        } else {
          showInfo.value.nextRestDayNum += 1;
        }
      }
    }

    // 是否是今日
    if (date == nowDate && month == new Date().getMonth() + 1 && year == new Date().getFullYear()) {
      obj.isToday = true;
      showInfo.value.nextRestDayNumSwitch = true;
      setshowInfo(year, month, nowDate, obj);
    } else {
      obj.isToday = false;
    }

    // 如果看其他月份，默认日子为1日
    if (month != new Date().getMonth() + 1 || year != new Date().getFullYear()) {
      if (date == 1 && month == monthR + 1) {
        setshowInfo(yearR, monthR + 1, date, obj);
      }
    }
  }

  //设置展示数据
  function setshowInfo(year, month, date, item) {
    let solar = Solar.fromYmd(year, month, date);
    let lunar = solar.getLunar();
    let eightChar = lunar.getEightChar();
    // 节日数组
    showInfo.value.solarFestivals = solar.getFestivals();
    // 纪念日数组
    showInfo.value.solarOtherFestivals = solar.getOtherFestivals();
    // 阴历节日数组
    showInfo.value.lunarFestivals = lunar.getFestivals();
    // 阴历其他传统节日
    showInfo.value.lunarOtherFestivals = lunar.getOtherFestivals();
    // 节气
    showInfo.value.lunarJieQi = lunar.getJieQi();
    showInfo.value.year = year;
    showInfo.value.month = month;
    showInfo.value.date = date;

    showInfo.value.other = [];

    showInfo.value.other.push(
      lunar.getYearInGanZhi() +
        ' ' +
        lunar.getYearShengXiao() +
        ' 年 ' +
        eightChar.getYearNaYin() +
        ' ' +
        eightChar.getYearWuXing(),
    );
    showInfo.value.other.push(
      lunar.getMonthInGanZhi() +
        ' ' +
        lunar.getMonthShengXiao() +
        ' 月 ' +
        eightChar.getMonthNaYin() +
        ' ' +
        eightChar.getMonthWuXing(),
    );
    showInfo.value.other.push(
      lunar.getDayInGanZhi() +
        ' ' +
        lunar.getDayShengXiao() +
        ' 日 ' +
        eightChar.getDayNaYin() +
        ' ' +
        eightChar.getDayWuXing(),
    );
    showInfo.value.other.push('-');

    let temp = lunar.getDayYi();
    let tempStr = '';
    temp.forEach(item => {
      tempStr += item + ' ';
    });
    showInfo.value.other.push('宜');
    showInfo.value.other.push(tempStr);
    temp = lunar.getDayJi();
    tempStr = '';
    temp.forEach(item => {
      tempStr += item + ' ';
    });
    showInfo.value.other.push('忌');
    showInfo.value.other.push(tempStr);

    if (lastSelect) {
      lastSelect.isSelect = false;
    }
    item.isSelect = true;
    lastSelect = item;
  }

  // 改变月份，重新初始化
  function changeMonth(num) {
    let year = showInfo.value.year;
    let month = showInfo.value.month - 1;
    let newDate = new Date(year, month, 1);
    newDate.setMonth(new Date(year, month, 1).getMonth() + num);
    yearR = newDate.getFullYear();
    monthR = newDate.getMonth();
    init(yearR, monthR);
  }

  function changeMonthT() {
    yearR = new Date().getFullYear();
    monthR = new Date().getMonth();
    init(yearR, monthR);
  }
</script>

<template>
  <div class="panel_N2">
    <div class="position_N3">
      <div class="text_H1 mb1">日历</div>
      <div class="text_H7 mb2">
        本月
        <div class="text_H11" style="display: inline-block">{{ showInfo.dayNum }}</div>
        天,已经过
        <div class="text_H11" style="display: inline-block">{{ showInfo.alreadyDayNum }}</div>
        天
      </div>
      <div class="text_H7 mb2">
        工作
        <div class="text_H11" style="display: inline-block">{{ showInfo.workDayNum }}</div>
        天,已工作
        <div class="text_H11" style="display: inline-block">{{ showInfo.alreadyWorkDayNum }}</div>
        天
      </div>
      <div class="text_H7 mb2">
        休息
        <div class="text_H11" style="display: inline-block">{{ showInfo.restDayNum }}</div>
        天,还可休
        <div class="text_H11" style="display: inline-block">{{ showInfo.restDayNum - showInfo.alreadyRestDayNum }}</div>
        天
      </div>
      <div class="text_H7 mb2">
        加油！再过
        <div class="text_H11" style="display: inline-block">{{ showInfo.nextRestDayNum }}</div>
        天,就休息啦
      </div>
      <div class="text_H7 mb2">&nbsp;</div>
      <div class="text_H3 mb2" v-for="(item, index) in showInfo.solarFestivals">
        {{ item }}
      </div>
      <div class="text_H3 mb2" v-if="utilTool.isNotEmpty(showInfo.lunarJieQi)">
        {{ showInfo.lunarJieQi }}
      </div>
      <div class="text_H3 mb2" v-for="(item, index) in showInfo.lunarFestivals">
        {{ item }}
      </div>
      <div class="text_H3 mb2" v-for="(item, index) in showInfo.solarOtherFestivals">
        {{ item }}
      </div>
      <div class="text_H3 mb2" v-for="(item, index) in showInfo.lunarOtherFestivals">
        {{ item }}
      </div>
    </div>
    <div class="card_N5">
      <div style="width: 100vw; height: 3vw; text-align: center; margin-top: 0.5rem">
        <div class="text_H7" style="position: relative">
          <button class="button_N8" v-on:click="changeMonth(-1)"><</button>
          <div style="width: 12vw; display: inline-block">
            {{ showInfo.year }}年{{ showInfo.month }}月{{ showInfo.date }}日
          </div>
          <button class="button_N8" v-on:click="changeMonth(1)">></button>
          <button class="button_N9" style="position: absolute; right: 2vw" v-on:click="changeMonthT()">今日</button>
        </div>
      </div>
      <div class="position_N2">一</div>
      <div class="position_N2">二</div>
      <div class="position_N2">三</div>
      <div class="position_N2">四</div>
      <div class="position_N2">五</div>
      <div class="position_N2 rest">六</div>
      <div class="position_N2 rest">日</div>
      <div
        v-for="(item, index) in toolDate"
        class="card_N6"
        :class="[{ opacity: item.isOpacity }, { today: item.isToday }, { select: item.isSelect }]"
        v-on:click="setshowInfo(item.year, item.month, item.date, item)"
      >
        <div v-if="item.adjust == 'rest'" class="rTop text_H4">休</div>
        <div v-if="item.adjust == 'work'" class="rTop_B text_H4">班</div>
        <div :class="[{ rest: item.isRest }, item.isToday ? 'text_H8' : 'text_H7']">
          {{ item.date }}
        </div>
        <div :class="item.isToday ? 'text_H9' : 'text_H10'">
          {{ item.showInfo }}
        </div>
      </div>
    </div>
    <div class="position_N3" style="padding-left: 3vw">
      <div class="text_H3 mb2" v-for="(item, index) in showInfo.other">
        <div v-if="item == '-'">&nbsp;</div>
        <div v-else>{{ item }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .position_N3 {
    width: 20vw;
    height: 40vw;
  }
  .position_N2 {
    font-size: 1rem;
    width: 4vw;
    height: 1vw;
    margin: 1vw;
    display: flex;
    flex-direction: row; /* 方向：| row | row-reverse | column | column-reverse; */
    flex-wrap: wrap; /* 换行：| nowrap | wrap | wrap-reverse; */
    justify-content: center; /*横向对齐方式 | flex-start | flex-end | center | space-between | space-around | space-evenly;*/
    align-items: center; /*纵向对齐方式 | stretch | flex-start | flex-end | center | baseline; */
  }
  .rest {
    color: var(--color-text-pink);
  }
  .select {
    background-color: var(--color-text-pink-light);
  }
  .today {
    background-color: var(--color-text-pink);
  }

  .rTop {
    position: absolute;
    top: -0.4rem;
    right: -0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.3rem;
    color: var(--color-text-white);
    background-color: var(--color-text-pink);
    text-align: center;
  }
  .rTop_B {
    position: absolute;
    top: -0.4rem;
    right: -0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.3rem;
    color: var(--color-text-white);
    background-color: var(--color-text-black);
    text-align: center;
  }
  .mb1 {
    margin-bottom: 2rem;
  }
  .mb2 {
    margin-bottom: 1rem;
  }
  .opacity {
    opacity: 0.25;
  }
</style>
